@import './common-var.less';

.editor-center {
  font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;

  .row {
    margin: 0;
    min-height: unset;
  }

  color: @dark-font-color;
  background: #ffffff;
  border-radius: 5px;
  height: 100vh;
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;

  .editor-header {
    border-bottom: 1px solid @border-color_normal;
    position: relative;

    .left-dropdown-wrapp {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 60px;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      border-right: 1px solid @border-color_normal;

      .menu-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
      }

      /deep/ .ivu-select-dropdown {
        .ivu-dropdown-menu {
          margin: 4px 0;

          .ivu-dropdown-item {
            padding: unset;
            color: @dark-font-color;

            .quick-menu {
              padding: 8px 22px;

              .iconfont {
                margin-right: 5px;
              }
            }
          }
        }
      }
    }

    .title-info {
      padding: 8px 0;
      margin-left: 16px;
      width: 40%;

      .list-group-item {
        background-color: unset;
        border: none;
        padding: 0 0 0 0;
      }

      .iconfont {
        margin-left: 5px;
        line-height: 16px;
      }

      .update-ing {
        animation: spin 2s linear infinite;
      }

      .title {
        font-weight: 700;
        font-size: 16px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .author-info {
        display: flex;
        align-items: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;

        a {
          color: @grey-white-font-color;
        }

        .update-time {
          color: @grey-white-font-color;
          display: flex;
          align-items: center;
        }
      }

    }

    .editor-setting {
      position: absolute;
      top: 14px;
      right: 20px;
      z-index: 301;
      width: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      .update-btn {
        width: 60px;
        height: 30px;
        margin-right: 30px;
      }

      /deep/.normal-dropdown {
        border: 1px solid rgba(255, 255, 255, 0.2);
      }

      .setting-icon {
        height: 40px;

        .iconfont {
          font-size: 20px;
        }
      }

      /deep/ .ivu-dropdown {
        .ivu-select-dropdown {
          width: 240px;
          border-radius: 8px;
          padding: 8px 0;
          margin: 0;

          .ivu-dropdown-item {
            padding: unset;
          }

          .doc-set-style-wrapp {
            margin-left: -2px;
          }

          .ivu-divider-horizontal {
            margin: 4px 0;
          }

          .editor-icon {
            margin-right: 8px;
          }

          .editor-set {
            padding: 7px 16px;
            display: flex;
            align-content: center;
            font-size: 14px;
            color: @dark-font-color;
            line-height: 20px;
            margin: 4px;

            .i-more {
              margin-left: 5px;
              font-size: 13px;
            }
          }

          .doc-set-style-wrapp {
            .doc-set-style {
              span {
                line-height: 24px;
              }
            }

            .ivu-select-dropdown {
              .ivu-dropdown-item:hover {
                background: unset;
              }
            }
          }

          .for-version {
            margin-left: 28px;
          }

          .doc-info {
            margin: 20px 0 0 20px;
            color: @grey-white-font-color;
            font-size: 12px;
            line-height: 20px;

            div {
              margin-top: 4px;
            }
          }

          /* 内嵌dropdown样式 */

          .ivu-select-dropdown {
            width: 340px;

            .style-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 10px 24px;
            }
            .segment-space {
              .ivu-radio-wrapper {
                margin-bottom: 0;
                margin-right: 12px;

                &:last-child {
                  margin-right: 0;
                }
              }
            }

            .set-default {
              .ivu-checkbox-checked .ivu-checkbox-inner {
                border-color: @primary-color;
                background-color: @primary-color;
              }

              .ivu-checkbox-focus {
                box-shadow: unset !important;
              }
            }

            .page-size {
              .standard-wide, .ultra-wide {
                display: flex;
                flex-direction: row;
                cursor: pointer;
                text-align: center;
                height: 40px;
                width: 140px;
                line-height: 40px;
                padding: 5px 9px 6px 9px;
                border-radius: 6px;
                border: 1px solid @border-color_normal;

                svg {
                  color: #8A8F8D;
                }
                svg:not(:root) {
                  overflow: hidden;
                }

                .larkui-icon {
                  display: inline-block;
                  font-style: normal;
                  line-height: 0;
                  text-align: center;
                  text-transform: none;
                  vertical-align: -.125em;
                  text-rendering: optimizeLegibility;
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
                  color: @grey-white-font-color;
                }

                .Select-module_optionTitle {
                  display: flex;
                  justify-content: space-around;
                  font-size: 14px;
                  text-align: center;
                  height: 28px;
                  line-height: 28px;
                  margin-left: 21px;
                }
              }

              .ultra-wide {
                margin-left: 12px;
              }

              .Select-module_optionActive {
                border: 1px solid @primary-color;
                .Select-module_iconSvg {
                  color: @primary-color;
                }
              }

              .standard-wide:hover, .ultra-wide:hover {
                background: #F4F5F5;
                border-color: @primary-color;
              }
            }
          }

        }
      }

      /deep/.ivu-drawer {
        color: @dark-font-color;
        min-width: 320px;

        .ivu-drawer-content {
          top: unset;

          .ivu-drawer-header {
            font-size: 14px;
            font-weight: bold;
            padding: 25px 20px 22px 20px;
            cursor: pointer;

            .return {
              font-size: 13px;
              margin-right: 4px;
            }

            &:hover {
              color: @light-font-color;
            }
          }

          .ivu-drawer-body {
            padding: 16px 20px;

            .drawer-setting-item {
              display: flex;
              background-color: #FAFAFA;
              border-radius: 6px;
              margin-bottom: 15px;
              font-size: 12px;
              padding: 16px;

              .label {
                font-size: 14px;
                margin-bottom: 5px;
              }

              .label_desc {
                color: @grey-white-font-color;
              }

              .article-time{
                display: flex;
                flex-direction: column;

                span {
                  margin: 3px 0;
                }
              }
            }

            .font-size {
              cursor: auto;
              align-items: center;

              .label-wrapper {
                margin-right: 10px;
                .iconfont {
                  font-size: 25px;
                }
              }

              .font-select {
                width: calc(~"100% - 35px");
                .select-point {
                  display: flex;

                  .slider-module_slideContainer {
                    display: flex;
                    justify-content: center;
                    position: relative;
                    flex: 1;
                    line-height: 44px;
                    margin: 0;
                    background: none !important;
                    color: @dark-font-color;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    cursor: pointer;
                    transition: border-color .3s, background .3s, padding .3s cubic-bezier(.645, .045, .355, 1);

                    .ant-slider-with-marks {
                      position: relative;
                      height: 12px;
                      width: 100%;
                      line-height: 1.5715;
                      margin-top: 7px;
                      font-size: 14px;
                      color: @primary-color;
                      font-variant: tabular-nums;
                      list-style: none;
                      font-feature-settings: "tnum";
                      cursor: pointer;
                      touch-action: none;
                      white-space: nowrap;

                      .ant-slider-rail {
                        position: absolute;
                        height: 2px;
                        width: 100%;
                        margin-left: 3px;
                        background: #D8DAD9;
                        border-radius: 6px;
                        box-sizing: border-box;
                        transition: background-color .3s;
                      }

                      .ant-slider-step {
                        position: absolute;
                        width: 95%;
                        height: 4px;
                        background: transparent;
                        display: flex;
                        justify-content: center;

                        .slider-dot-wrapp {
                          position: absolute;
                          height: 20px;
                          width: 10px;
                        }

                        .slider-dot-wrapp:nth-child(4) {
                          .slider-dot {
                            background: @grey-white-font-color;
                            border-color: @grey-white-font-color;
                          }
                        }

                        .slider-dot:first-child, .slider-dot:last-child {
                          margin-left: 2px;
                        }

                        .slider-dot {
                          line-height: 10px;
                          position: absolute;
                          height: 8px;
                          width: 8px;
                          top: -3px;
                          background: #D8DAD9;
                          border-color: #D8DAD9;
                          border-radius: 50%;
                          cursor: pointer;
                        }

                      }

                      .ant-slider-handle, .ant-slider-handle:focus, .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
                        border: 1px solid @border-color_normal;
                        box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.13), 0 2px 8px 0 rgba(0, 0, 0, 0.08), 0 8px 16px 4px rgba(0, 0, 0, 0.04);
                        transition: none;
                        margin-top: -6px;
                      }

                      .show-select-font {
                        outline: none;
                        border-color: @primary-color!important;
                      }

                      .ant-slider-handle {
                        position: absolute;
                        right: auto;
                        width: 14px;
                        height: 14px;
                        background: #ffffff;
                        border-radius: 50%;
                        cursor: pointer;
                        transform: translateX(-50%);
                      }
                    }
                  }
                }

                .slider-module_slideTitle {
                  font-size: 14px;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  margin-bottom: 5px;
                }
              }
            }

            .time-info, .more-setting {
              flex-direction: column;

              .ivu-divider {
                margin: 12px 0;
                color: @border-color_normal;
              }
            }

            .page-size, .theme-sync {
              height: 70px;
              align-items: center;
              justify-content: space-between;

              .label-wrapper {
                display: flex;
                align-items: center;

                .icon-wrapper {
                  margin-right: 8px;
                  display: flex;
                  .iconfont {
                    font-size: 23px;
                  }
                }
              }
            }

            .doc-setting-btn {
              display: flex;
              align-items: center;
              line-height: 25px;
              font-size: 14px;
              border-radius: 4px;
              cursor: pointer;
              padding: 5px 3px;

              &:first-child {
                margin-top: 5px;
              }

              &:hover {
                background: #E7E9E8;
              }

              .iconfont {
                margin-right: 8px;
              }
            }

            .save-version {
              .tab-content-text {
                margin-left: 24px;
              }
            }

            .delete-btn {
              color: @delete-red;
            }
          }
        }
      }
    }
  }

  /deep/.ant-tooltip {
    font-size: 12px;
    max-width: 160px;
  }
}

.enable-background {
  color: var(--font-color);

  .editor-header {
    border-color: @border-color_normal;

    .left-dropdown-wrapp {
      /deep/ .ivu-select-dropdown {
        .ivu-dropdown-menu {
          .ivu-dropdown-item {
            color: var(--font-color);
          }
        }
      }
    }

    .title-info {
      .author-info {
        a {
          color: var(--title-color);
        }

        .update-time {
          color: var(--title-color);
        }
      }
    }

    .editor-setting {
      /deep/ .ivu-select-dropdown {
        .Select-module_optionActive {
          .Select-module_iconSvg {
            color: @primary-color;
          }
        }
      }
      /deep/.standard-wide:hover {
        background: var(--dropdown-item-hover) !important;
      }

      /deep/.ultra-wide:hover {
        background: var(--dropdown-item-hover) !important;
      }

      /deep/.ivu-drawer {
        color: var(--font-color)!important;
        .ivu-drawer-content {
          background: var(--dropdown-bg-color);

          .ivu-drawer-header {
            &:hover {
              color: var(--title-color) !important;
            }
          }

          .ivu-drawer-body {
            .drawer-setting-item {
              background-color: var(--dropdown-item-hover) !important;
              .label_desc {
                color: var(--title-color) !important;
              }
            }
            .article-time{
              span {
                color: var(--title-color);
              }
            }
            .doc-setting-btn {
              &:hover {
                background: var(--dropdown-bg-color) !important;
              }
            }

            .summary {
              .ivu-input {
                color: var(--font-color);
              }
            }

            .category {
              .label {
                .label-tip {
                  color: var(--title-color);
                }
              }

              .category-group {
                .ivu-select {
                  color: var(--font-color);

                  .ivu-select-selection {
                    background: var(--dropdown-bg-color);
                    border-color: @border-color_normal;
                  }

                  .ivu-select-dropdown {
                    background: var(--dropdown-bg-color);
                    border: 1px solid @border-color_normal;

                    .ivu-select-dropdown-list {
                      margin-bottom: unset;

                      .ivu-select-item {
                        color: var(--title-color);

                        &:hover {
                          background: var(--dropdown-item-hover);
                        }
                      }

                      .ivu-select-item-focus {
                        background: var(--dropdown-item-hover);
                      }
                    }
                  }
                }

                .ivu-select-visible .ivu-select-selection {
                  border-color: @primary-color;
                }

                .ivu-select-disabled .ivu-select-selection {
                  background: var(--dropdown-item-hover);
                  color: @grey-white-font-color;
                }
              }
            }

            .tags {
              .label {
                .label-tip {
                  color: var(--title-color);
                }
              }

              .tag-add-control {
                .ivu-input {
                  color: var(--font-color);
                }

                .empty-to-add {
                  background: var(--dropdown-item-hover);
                  color: var(--font-color);

                  &:hover {
                    background: var(--on-theme-bg-color);
                  }
                }
              }
            }

            .history-version{
              .new-version-tag {
                .ivu-input {
                  color: var(--font-color);
                }

                .ivu-btn-text {
                  color: var(--title-color);
                }
              }

              .doc-version {
                background: var(--dropdown-bg-color);

                .doc-version-basic {
                  color: var(--font-color);

                  .ivu-input {
                    color: var(--font-color);
                  }
                }

                .doc-version-action {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  .doc-version-time {
                    color: var(--title-color);
                  }

                  .bianji, .delete {
                    color: var(--title-color);
                  }
                }
              }
            }
          }
        }
      }
    }

    .editor-set {
      color: var(--font-color) !important;
    }
  }

  /deep/.toc-selected {
    color: var(--font-color) !important;
  }

  /deep/.am-engine {
    color: var(--font-color);

    .data-codeblock-container {
      .data-codeblock-content {
        background: unset;

        .CodeMirror-sizer {
          .CodeMirror-lines {
            .CodeMirror-cursor {
              border-color: var(--font-color);
            }

            .CodeMirror-code {
              .CodeMirror-line {
                color: var(--font-color);
              }
            }
          }
        }

        .CodeMirror-gutters {
          color: var(--title-color);
          background: var(--on-theme-bg-color);
        }
      }
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--font-color);
    }

    .data-list {
      color: var(--font-color);
    }
  }

  /deep/ .editor-toolbar {
    .editor-toolbar-content {
      .toolbar-button {
        color: var(--font-color);
        #fontcolor-icon, #backcolor-icon {
          fill: var(--font-color);
        }

        &:hover {
          background: var(--dropdown-item-hover);
        }
      }

      .toolbar-button-active {
        color: var(--title-color);
        background-color: var(--dropdown-item-hover);
      }
    }
  }

  /deep/ .toolbar-dropdown .toolbar-dropdown-list {
    background: var(--dropdown-bg-color);
    border-color: @border-color_normal;

    .toolbar-collapse-header {
      color: var(--font-color);
    }

    .toolbar-collapse-item {
      .toolbar-collapse-item-text {
        .toolbar-collapse-item-title {
          color: var(--font-color);
        }
      }
    }

    .toolbar-dropdown-list-item {
      color: var(--font-color);

      &:hover {
        background: var(--dropdown-item-hover);
      }

      .data-icon-dot {
        background-image: unset;

        &::after {
          content: "✓";
          font-size: 14px;
          color: var(--font-color);
          position: absolute;
          margin-top: -7px;
        }
      }
    }

    .toolbar-collapse-item-active {
      background: var(--dropdown-item-hover);
    }

    .colorpicker-default-text {
      color: var(--title-color);
    }
  }

  // 可拖拽组件
  /deep/.data-card-dnd {
    background: var(--dropdown-item-hover);
  }
  // 通用工具栏
  /deep/ .data-card-toolbar {

    .data-toolbar-group {
      background: var(--dropdown-bg-color);
      border-color: @border-color_normal;

      .data-toolbar-item:not(.data-toolbar-item-input):hover, .data-toolbar-item.active:not(.data-toolbar-item-input) {
        background-color: var(--dropdown-item-hover);
        border-radius: 4px;
      }

      .data-toolbar-btn {
        color: var(--title-color);
      }

      .ivu-select-selection {
        background: var(--dropdown-bg-color);
        border-color: @border-color_normal;

        .ivu-select-input {
          color: var(--font-color);
        }
      }

      .ivu-select-dropdown {
        background: var(--dropdown-bg-color);

        .ivu-select-item:hover, .ivu-select-item-focus {
          background: var(--dropdown-item-hover);
          color: var(--font-color);
        }
      }

      .data-toolbar-switch:hover {
        background: var(--dropdown-item-hover);
      }
    }
  }

  /deep/.table-color-dropdown-trigger {
    .table-color-dropdown-button-text:hover, .table-color-dropdown-arrow:hover {
      background: var(--dropdown-item-hover);
      border-color: var(--border-color);
    }

    &:hover {
      .table-color-dropdown-button-text, .table-color-dropdown-arrow {
        border-color: var(--border-color);
      }
    }

  }

  // 表格相关
  /deep/.table-wrapper {
    .table-header .table-header-item,
    .table-rows-header .table-rows-header-item,
    .table-cols-header .table-cols-header-item {
      background: var(--rj-editor-bg-color);
      border-color: var(--border-color);

      &:hover {
        background: var(--modal-bg-color);
      }
    }
  }

  /deep/ .data-table-color-tool {
    background: var(--dropdown-bg-color);
    border-color: var(--border-color);

    .data-table-color-tool-default:hover {
      background: var(--dropdown-item-hover);
    }
  }
}

/deep/ .delete-modal {
   .ivu-modal-content {
     color: @dark-font-color;
     background: @dropdown-background;
     padding: 32px 32px 24px;

     .ivu-modal-body {
       margin-bottom: 40px;
       font-size: 14px;
       line-height: 1.5715;
       word-wrap: break-word;

       .delete-tips {
         .i-warn {
           color: #ECAA04;
           font-size: 25px;
           margin-right: 8px;
           margin-bottom: 2px;
         }

         display: flex;
         align-items: center;
       }

       .confirm-btn {
         float: right;
         margin-top: 24px;
         margin-bottom: 20px;

         .ivu-btn-default {
           margin-right: 10px;
         }
       }
     }
   }
}

/deep/ .delete-modal-ct {
  .ivu-modal-content {
    color: var(--font-color);
    background: var(--modal-bg-color);
  }
}

/* 定义旋转动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



